import {Component, OnInit} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import G6 from '@antv/g6';

@Component({
  selector: 'app-ant-g6',
  templateUrl: './ant-g6.component.html',
  styleUrls: ['./ant-g6.component.scss']
})
export class AntG6Component implements OnInit {

  diagramData: any;

  constructor(private httpClient: HttpClient) {
  }

  ngOnInit() {
    this.getData();
  }

  buildG6() {
    const graph = new G6.Graph({
      container: "nodeG6", width: 800, height: 600,
      modes: {
        default: [{
          type: 'collapse-expand', trigger: 'click',
          // onChange: function onChange(item, collapsed) {
          //   if (item) {
          //     const data = item.get('model').data;
          //     data.collapsed = collapsed;
          //     return true;
          //   }
          // }
        }, 'drag-canvas', 'zoom-canvas']
      }, defaultNode: {
        type: 'diamond'
      }
    });
    graph.data(this.diagramData);
    graph.render();
    graph.fitView();

  }

  getData() {
    const url = 'assets/mock/ant-g6-data.json';
    this.httpClient.get(url).subscribe(json => {
      if (json) {
        this.diagramData = json;

        this.buildG6();
      }
    })
  }
}
